<template>
  <div class="left-imageList-box">
    <div v-if="props.infoList.length > 7" class="flex-woper">
      <div
        class="list-item-box"
        @click.stop="setUrl(props.infoList[index],index)"
        v-for="(item, index) in 7"
        :key="item"
        :style="{
          borderColor:
            props.imgUrl == props.infoList[index]
              ? colorList5[store.styleInfo.colorType - 1].themeColor
              : 'transparent',
          background:
            props.imgUrl == props.infoList[index]
              ? colorList5[store.styleInfo.colorType - 1].fontColor
              : 'rgba(63,77,79,0.5)',
        }"
      >
        <div
          :style="{
            borderColor:
              props.imgUrl == props.infoList[index]
                ? colorList5[store.styleInfo.colorType - 1].themeColor
                : 'transparent',
          }"
          class="list-item-child-img"
          @click.stop="setUrl(props.infoList[index],index)"
        >
          <img :src="$filters.getLinkUrl(props.infoList[index], '?imageView2/1/w/56/h/56/format/webp')" alt="" />
        </div>
        <!-- <div
          class="list-item-child"
          :style="{
            borderColor:
              props.imgUrl == props.infoList[index]
                ? colorList5[store.styleInfo.colorType - 1].themeColor
                : 'transparent',
            background:
              props.imgUrl == props.infoList[index]
                ? colorList5[store.styleInfo.colorType - 1].fontColor
                : 'rgba(63,77,79,0.5)',
          }"
        >
          <div class="list-item-child-img">
            <img :src="$filters.getLinkUrl(props.infoList[index], '?imageView2/1/w/56/h/56/format/webp')" alt="" />
          </div>
        </div> -->
      </div>
    </div>
    <div v-else class="flex-woper">
      <div
        @click.stop="setUrl(item,index)"
        class="list-item-box"
        v-for="(item, index) in props.infoList"
        :key="item"
        :style="{
          borderColor:
            props.imgUrl == props.infoList[index]
              ? colorList5[store.styleInfo.colorType - 1].themeColor
              : 'transparent',
          background: props.imgUrl == item ? colorList5[store.styleInfo.colorType - 1].fontColor : 'rgba(63,77,79,0.5)',
        }"
      >
        <div
          :style="{
            borderColor:
              props.imgUrl == props.infoList[index]
                ? colorList5[store.styleInfo.colorType - 1].themeColor
                : 'transparent',
          }"
          class="list-item-child-img"
          @click.stop="setUrl(item,index)"
        >
          <img :src="$filters.getLinkUrl(item, '?imageView2/3/w/560/format/webp')" alt="" />
        </div>
        <!-- <div
          class="list-item-child"
          :style="{
            borderColor:
              props.imgUrl == props.infoList[index]
                ? colorList5[store.styleInfo.colorType - 1].themeColor
                : 'transparent',
            background:
              props.imgUrl == item ? colorList5[store.styleInfo.colorType - 1].fontColor : 'rgba(63,77,79,0.5)',
          }"
        >
          <div class="list-item-child-img">
            <img :src="$filters.getLinkUrl(item, '?imageView2/1/w/56/h/56/format/webp')" alt="" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import arrowLeft from '../../components/arrowLeft.vue';
import arrowRight from '../../components/arrowRight.vue';
import { ref, watch } from 'vue';
import { colorList5 } from '../../../data';
import { projectLists } from '@/api/project/project';
import { designList, exhibtNumber, addExhibits } from '@/api/desgin/desgin';
import { MessagePlugin } from 'tdesign-vue-next';
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/shear';
import shear from '@/components/shear/shear.vue';
import { urls } from '@/utils/request/upload';
import starInfo from '@/components/infoStar/infoStar.vue';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const emit = defineEmits(['followCompany', 'follow', 'stepExhibit', 'setCoverUrl']);
const projectId = ref(0);
const viewerIndex = ref(0);
const loading = ref(false);
const visible = ref(false);
const selectList = ref([]);

const visibleStep = ref(false);
const props = defineProps({
  infoList: {
    type: Object,
  },
  imgUrl: {
    type: String,
  },
});
const setUrl = (e: string,index) => {
  emit('setCoverUrl', e,index);
};
// console.log(props.infoList, props.imgUrl);
</script>

<style lang="less" scoped>
.left-imageList-box {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 58px;
  z-index: 20;
}
.flex-woper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.list-item-box {
  transition: all 0.4s;
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid transparent;
  margin-right: 8px;
  img {
    transition: all 0.4s;
    width: 8px;
    height: 8px;
  }
}

.list-item-child-img {
  transition: all 0.4s;
  position: relative;
  display: none;
  z-index: 30;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid transparent;
  img {
    width: 54px;
    transition: all 0.4s;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
  }
}
</style>
